<%@page contentType="text/html;charset=utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>生成订单 - 当当网</title>
	<link href="${pageContext.request.contextPath}/front/css/login.css" rel="stylesheet" type="text/css" />
	<link href="${pageContext.request.contextPath}/front/css/page_bottom.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="${pageContext.request.contextPath}/front/js/jquery-1.8.3.min.js"></script>
</head>
	<body>
		<%@include file="../common/head1.jsp"%>
		<div class="login_step">
			生成订单骤: 1.确认订单 >
			<span class="red_bold"> 2.填写送货地址</span> > 3.订单成功
		</div>
		<div class="fill_message">
			<p>
				选择地址：
				<select id="address">
					<option value="0">
						填写新地址
					</option>
					<c:forEach var="address" items="${requestScope.addresses}" varStatus="status">
						<option value="${status.count}">${address.local}</option>
					</c:forEach>
				</select>
			</p>
			<form name="ctl00" method="post" action="${pageContext.request.contextPath}/front/order/addOrder" id="f">
				<input id="addressId" type="hidden" name="address.addressId" />

				<table class="tab_login">
					<tr>
						<td valign="top" class="w1">
							收件人姓名：
						</td>
						<td>
							<input type="text" class="text_input" name="address.addressName" id="receiveName" />
							<div class="text_left" id="nameValidMsg">
								<p>
									请填写有效的收件人姓名
								</p>
								<span id="sp1"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							收件人详细地址：
						</td>
						<td>
							<input type="text" name="address.local" class="text_input" id="fullAddress" />
							<div class="text_left" id="addressValidMsg">
								<p>
									请填写有效的收件人的详细地址
								</p>
								<span id="sp2"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							邮政编码
						</td>
						<td>
							<input type="text" class="text_input" name="address.zipCode" id="postalCode" />
							<div class="text_left" id="codeValidMsg">
								<p>
									请填写有效的收件人的邮政编码
								</p>
								<span id="sp3"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							电话
						</td>
						<td>
							<input type="text" class="text_input" name="address.phone" id="phone" />
							<div class="text_left" id="phoneValidMsg">
								<p>
									请填写有效的收件人的电话
								</p>
								<span id="sp4"></span>
							</div>
						</td>
					</tr>
				</table>

				<div class="login_in">
					<a href="${pageContext.request.contextPath}/front/order/order_info.jsp">
						<input id="btnClientRegister1" class="button_1" name="submit" type="button" value="取消" />
					</a>
					<a href="">
						<input id="btnClientRegister2" class="button_1" name="submit" type="submit" value="下一步" />
					</a>
				</div>
			</form>
		</div>
		<%@include file="../common/foot1.jsp"%>
	<script type="text/javascript">
		var addresses = [
			{
				id:'0',
				addressId:"",
				name:"",
				local:"",
				zipCode:"",
				phone:""
			},
			<c:forEach var="address" items="${requestScope.addresses}" varStatus="status">
			{
				id:'${status.count}',
				addressId:"${address.addressId}",
				name:"${address.addressName}",
				local:"${address.local}",
				zipCode:"${address.zipCode}",
				phone:"${address.phone}"
			},
			</c:forEach>
		];

		//给select绑定change事件：根据所选的option的value，将对应的addresses中元素中的数据回显到表单
		$("#address").change(function(){
			var selectedObjs = $("option:selected");

			for (var i = 0; i < addresses.length; i++) {
				if(selectedObjs.get(0).value==addresses[i].id){
					$("#addressId").val(addresses[i].addressId);
					$("#receiveName").val(addresses[i].name);
					$("#fullAddress").val(addresses[i].local);
					$("#postalCode").val(addresses[i].zipCode);
					$("#phone").val(addresses[i].phone);
				}
				if(selectedObjs.get(0).value==0){
					$("input:text").prop("readonly","");
				}
				if(selectedObjs.get(0).value!=0){
					$("input:text").prop("readonly","readonly");
				}
			}
		});
		$(function () {
			$("input[name='address.addressName']").blur(checkAddressName);
			$("input[name='address.local']").blur(checkLocal);
			$("input[name='address.zipCode']").blur(checkZipCode);
			$("input[name='address.phone']").blur(checkPhone);
			$("form").submit(checkSubmit);
		})
		function checkSubmit(){
			var r1 = checkAddressName();
			var r2 = checkLocal();
			var r3 = checkZipCode();
			var r4 = checkPhone();
			return r1&&r2&&r3&&r4;
		}
		function checkAddressName() {
			var addressName=$("input[name='address.addressName']");
			if(addressName.val().trim().length<=0){
				$("#sp1").html("收件人姓名不能为空").css("color","red");
				return false;
			}else {
				$("#sp1").html("");
				return true;
			}
		}
		function checkLocal() {
			var local=$("input[name='address.local']");
			if(local.val().trim().length<=0){
				$("#sp2").html("地址不能为空").css("color","red");
				return false;
			}else {
				$("#sp2").html("");
				return true;
			}
		}
		function checkZipCode() {
			var zipCode=$("input[name='address.zipCode']");
			if(zipCode.val().trim().length<=0){
				$("#sp3").html("邮政编码不能为空").css("color","red");
				return false;
			}else {
				$("#sp3").html("");
				return true;
			}
		}
		function checkPhone() {
			var phone=$("input[name='address.phone']");
			if(phone.val().trim().length<=0){
				$("#sp4").html("手机号不能为空").css("color","red");
				return false;
			}else {
				$("#sp4").html("");
				return true;
			}
		}

	</script>
	</body>
</html>

